<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>{{ 'core.tag.searchtags' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <core-user-menu-button />
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
    </ion-refresher>
    <ion-grid>
        <ion-row class="ion-no-padding ion-wrap">
            <ion-col class="ion-no-padding" size="12" size-sm="6" [attr.col-sm-6]="collections && collections.length > 1 ? '' : null">
                <core-search-box (searchTextChange)="searchTags($event)" [searchText]="query" [disabled]="searching"
                    autocorrect="off" [spellcheck]="false" [autoFocus]="false" searchArea="CoreTag" />
            </ion-col>
            @if (collections && collections.length > 1) {
                <ion-col class="ion-no-padding" size="12" size-sm="6">
                    <core-combobox [selection]="collectionId" (selectionChange)="searchTags(query, $event)" [disabled]="searching">
                        <ion-select-option class="ion-text-wrap" [value]="0">
                            {{ 'core.tag.inalltagcoll' | translate }}
                        </ion-select-option>
                        <ion-select-option class="ion-text-wrap" *ngFor="let collection of collections" [value]="collection.id">
                            {{ collection.name }}</ion-select-option>
                    </core-combobox>
                </ion-col>
            }
        </ion-row>
    </ion-grid>
    <core-loading [hideUntil]="loaded && !searching">
        @if (!cloud || !cloud!.tags || !cloud.tags.length) {
            <core-empty-box icon="fas-tags" [message]="'core.tag.notagsfound' | translate: {$a: query}" role="alert" />
        } @else {
            <div class="ion-text-center core-tag-cloud">
                <ion-badge *ngFor="let tag of cloud!.tags" (click)="openTag(tag)" class="ion-text-wrap">
                    <span [class]="'size' + tag.size">{{ tag.name }}</span>
                </ion-badge>
            </div>
            @if (cloud.tags.length < cloud.totalcount) {
                <p class="ion-text-center">
                    {{ 'core.tag.showingfirsttags' | translate: {$a: cloud!.tags.length} }}
                </p>
            }

        }
    </core-loading>
</ion-content>
